<template>
    <div class="stu-container">
        <el-header class="stu-btns">
            <el-row>
                <div class="op-row">
                    <div class="block">
                        <el-cascader
                                v-model="value"
                                :options="options"
                                @change="handleChange">
                        </el-cascader>
                    </div>
                </div>
            </el-row>
        </el-header>
        <el-row :gutter="10" style="margin-left: 5px;">
            <el-col :span="8" v-for="(sj,o) in stuJobList" :key="o" style="margin-bottom: 10px">
                <el-card shadow="hover">
                    <el-row>
                        <el-col :span="12">
                            <viewer :images="photo">
                                <img style="width: 150px; height: 150px;"
                                     v-for="(src,index) in photo"
                                     :src="src"
                                     :key="index"
                                     fit="fill"
                                     :onerror="url">
                            </viewer>
                        </el-col>
                        <el-col :span="8">
                            <div style="width: 150px; line-height:30px">
                                <div>学号:&nbsp;&nbsp;{{sj.sid}}</div>
                                <div>姓名:&nbsp;&nbsp;{{sj.sname}}</div>
                                <div>状态:<span style="color: red">&nbsp;&nbsp;{{sj.status_str}}</span></div>
                                <div>成绩:
                                    <el-input v-model="sj.score"  style="width: 90px;" :disabled="sj.status===0"></el-input>
                                    <div style="text-align: center;margin-top: 5px">
                                        <el-button type="primary" round size="mini" @click="goToUpdateStuScore(sj)">确定</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import store from '../../store'
    export default {
        name: "correct",
        mounted() {
          this.getItsClassById(store.state.user.uid);
        },
        data() {
            return {
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                photo: [
                    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                ],
                value: [],
                options: [],
                stuJobList:[]
            }
        },
        methods:{
            getItsClassById(tid){
                this.$http
                    .get("teacher/getItsClassById?id="+tid)
                    .then(result => {
                        result.body.forEach((item,i)=>{
                            this.options.push({
                                value:item.cid,
                                label:item.cname,
                                children:[]
                            })
                            this.$http
                                .get("teacher/getJobByCIdAndTid?cid="+item.cid+"&tid="+tid)
                                .then(result1=>{
                                    result1.body.forEach((item1)=>{

                                        this.options[i].children.push(item1)
                                    })
                                })
                        });
                    });
            },
            handleChange(value) {
                this.$http
                    .get("teacher/getStudentJobByJidAndCid?cid="+value[0]+"&jid="+value[1])
                    .then(result1=>{
                        result1.body.forEach((item,i)=>{
                            if(item.status===1){
                                item.status_str='已提交'
                            }else if(item.status===0){
                                item.status_str='未提交'
                            }else if(item.status===2){
                                item.status_str='已批改'
                            }
                        })
                        this.stuJobList = result1.body;
                    })
            },
            goToUpdateStuScore(sj){
                sj.status = '已批改'
                this.$http
                    .post("teacher/goToUpdateStuScore?sid="+sj.sid+"&jid="+sj.jid+"&score="+sj.score)
                    .then(result=>{
                        this.$message({
                            type: 'success',
                            message: '批改成功!'
                        });
                    })

            }
        }
    }
</script>

<style lang="scss" scoped>

    .stu-container {
        .text {
            font-size: 14px;
        }

        .item {
            padding: 18px 0;
        }

        .el-card {
            width: 380px;
            height: 200px;
            padding: 10px 10px 10px 10px !important;

            .el-col {
                .div {
                    width: 145px;
                }
            }
        }

        .stu-btns {
            margin: 0px 5px 5px 5px;
            box-shadow: 0 0 9px #999;
            background-color: #ffffff;
            width: 100%;
            height: 60px;

            .op-row {
                padding: 10px;
                display: flex;
                justify-content: space-between;
            }
        }
    }

</style>
